<template>
	<view style="height: 100%;" class="bg-white">
		<cu-custom :isBack="false">
			<block slot="content">消息</block>
		</cu-custom>
		<view class="flex justify-around align-start padding solid-bottom" style="width: 100%;">
			<view @tap="jumpToReplyList" class="flex justify-center align-center subscribe-item">
				<image src="../../static/images/setting/reply.png" class="message-icon">
				</image>
				<view style="height: 2px;"></view>
				<text>回复</text>
				<view v-if="unreadCommentCount>0" class="unread-badge">{{unreadCommentCount}}</view>
			</view>
			<view @tap="jumpToNewFansList" class="flex justify-center align-center subscribe-item">
				<image src="../../static/images/setting/fans.png" class="message-icon"></image>
				<view style="height: 2px;"></view>
				<text>粉丝</text>
				<view v-if="unreadFansListCount>0" class="unread-badge">{{unreadFansListCount}}</view>
			</view>
			<view @tap="jumpToNotificationList" class="flex justify-center align-center subscribe-item">
				<image src="../../static/images/setting/notification.png" class="message-icon">
				</image>
				<view style="height: 2px;"></view>
				<text>通知</text>
				<view v-if="unreadNotiCount>0" class="unread-badge">{{unreadNotiCount}}</view>
			</view>
			<view @tap="jumpToPraiseList" class="flex justify-center align-center subscribe-item">
				<image src="../../static/images/setting/praise.png" class="message-icon">
				</image>
				<view style="height: 2px;"></view>
				<text>点赞</text>
				<view v-if="unreadPraiseCount>0" class="unread-badge">{{unreadPraiseCount}}</view>
			</view>
		</view>
		<view v-if="isUserLogin==false">
			<view style="height: 70vh;">
				<view class="flex justify-center align-center"
					style="flex-direction: column;height:40vh;">
					<view class="flex justify-start align-center" style="flex-direction: column;">
						<image src="../../static/images/setting/index_attention.png"
							style="width: 66upx;height: 66upx;"></image>
						<view style="height: 2upx;"></view>
						<text class="text-grey">登录同步小纸条消息</text>
					</view>
					<view style="height: 20upx;"></view>
					<view class="flex justify-center align-center" style="width: 100%;">
						<button @tap="loginNowAction" class="cu-btn bg-green radius" style="width: 40%;">立即登录</button>
					</view>
				</view>
			</view>
		</view>
		<mescroll-body v-else ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="container">
				<block v-for="(item,index) in dataList" :key="index">
					<tui-list-cell class="solid-bottom" @click="jumpToConversation(item)" :unlined="true">
						<view class="tui-chat-item">
							<view class="tui-msg-box">
								<image @click.stop="jumpToUserProfile(item.receiver.user_id)"
									:src="item.receiver.avatar" class="tui-msg-pic" mode="widthFix"></image>
								<view class="tui-msg-item">
									<view class="tui-msg-name">{{item.receiver.nickname}}</view>
									<view class="tui-msg-content">{{item.last_message}}</view>
								</view>
							</view>
							<view class="tui-msg-right">
								<view class="tui-msg-time">{{item.show_time}}</view>
								<tui-badge type="danger" :dot="false" v-if="item.unread_count>0">{{item.unread_count}}
								</tui-badge>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<view class="tui-safearea-bottom"></view>
			</view>
		</mescroll-body>
		<view class="cu-tabbar-height"></view>
		<publish-choose ref="publishChoose" class="publish-choose"></publish-choose>
		<tabbar @publish="publishClicked" :tabCur="3" :unreadMsgCount="unreadMsgCount" :unreadCount="tabUnreadCount">
		</tabbar>
	</view>
</template>

<script>
	import {
		isLogin
	} from '@/api/auth.js'
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import {
		getConversationList,
		userUnreadCountInfo
	} from '@/api/api.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import tabbar from '@/components/tabbar.vue'
	import config from '@/api/config.js'
	import PublishChoose from '@/components/publish-choose.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			tabbar,
			PublishChoose
		},
		data() {
			return {
				isUserLogin:isLogin(),
				unreadMsgCount: 0,
				unreadNotiCount: 0,
				unreadCommentCount: 0,
				unreadMessageCount: 0,
				unreadPraiseCount: 0,
				unreadActivePraiseCount: 0,
				unreadFansListCount: 0,
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		onLoad() {
			let that = this
			uni.$on('UserLoginSuccess',function(){
				that.isUserLogin = isLogin()
			})
		},
		onHide() {
			this.$refs.publishChoose.hiddenTabbar()
		},
		onShow() {
			if (isLogin()) {
				userUnreadCountInfo().then(res => {
					this.unreadMsgCount = res.data.total
					this.unreadCommentCount = res.data.reply_count
					this.unreadMessageCount = res.data.message_count
					this.unreadNotiCount = res.data.notification_count
					this.unreadPraiseCount = res.data.praise_total
					this.unreadPostPraiseCount = res.data.post_praise_count
					this.unreadActivePraiseCount = res.data.active_praise_count
					this.unreadFansListCount = res.data.fans_count
				})
			}
		},
		onPageScroll() {
			this.$refs.publishChoose.hiddenTabbar()
		},
		methods: {
			loginNowAction() {
				checkLogin()
			},
			jumpToNewFansList() 
			{
				if(isLogin()==false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url:'/pages/lessuse/fans-list/fans-list?mode=2'
				})
			},
			jumpToReplyList() {
				if(isLogin()==false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/always/user-reply/user-reply'
				})
			},
			jumpToPraiseList() {
				if(isLogin()==false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/always/comment-praise-list/comment-praise-list?postPraiseCount=' + this
						.unreadPostPraiseCount + '&activePraiseCount=' + this.unreadActivePraiseCount
				})
			},
			jumpToNotificationList() {
				if(isLogin()==false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/always/notification/notification'
				})
			},
			publishClicked() {
				if(isLogin()==false) {
					checkLogin()
					return
				}
				this.$refs.publishChoose.switchStatus()
			},
			jumpToUserProfile(userId) {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			jumpToConversation(conversation) {
				if(isLogin()==false) {
					checkLogin()
					return
				}
				let toUser = conversation.receiver
				uni.navigateTo({
					url: '/pages/always/conversation/conversation?toId=' + toUser.user_id + '&toName=' + toUser
						.nickname
				})
			},
			getDataList(pageIndex, pageSize) {
				getConversationList(pageIndex, pageSize).then(res => {
					res.data.list.forEach(item => {
						item.show_time = getTimeDistance(item.last_message_time)
					})
					let pageList = res.data.list
					if (pageIndex == 0) {
						this.dataList = pageList
					} else {
						this.dataList = this.dataList.concat(pageList)
					}
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(this.dataList.length, hasNext);
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 100rpx
	}

	/*tabbar*/

	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background-color: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d2d2d2;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #00c0fb !important;
	}

	.tui-searchbox {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tui-search-input {
		width: 100%;
		height: 72rpx;
		background: #fafafa;
		border-radius: 36rpx;
		font-size: 30rpx;
		color: #A8ABB8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-search-text {
		padding-left: 16rpx;
	}

	/*searchbox*/

	.tui-chat-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 28rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76rpx;
		padding-bottom: 10rpx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}

	.message-icon {
		width: 30px;
		height: 30px;
	}

	.publish-choose {
		position: fixed;
		width: 100%;
		bottom: 130upx;
		z-index: 111;
	}

	.unread {}

	.message-item {
		width: 33.3%;
		flex-direction: column;
		height: 100%;
	}

	.subscribe-item {
		position: relative;
		width: 25%;
		flex-direction: column;
		height: 100%;
	}

	.unread-badge {
		position: absolute;
		top: 7%;
		right: 24%;
		border-radius: 200upx;
		font-size: 20upx;
		padding: 0upx 10upx;
		height: 28upx;
		color: #FFF;
		background-color: #f40738;
	}
</style>
